CSS in Depth 学习札记之：猫头鹰选择器

CSS 进阶神作 CSS in Depth 的中文版——《深入解析 CSS》，终于在原书出版两年后的“新冠”元年悄然问世。很多当年硬啃原版遗留的问题，在两位翻译大神的指点下逐一得到校正，这种感觉就是 FEEL 倍儿爽~。其中不乏一些当时被跳过的冷门知识，再次读到倍感亲切，不禁发散了一下，没想到还有点意思，比如这个 猫头鹰选择器。

这是原书第三章精讲盒模型时，为了解决一个外边距样式的问题而给出的终极“大杀器”——

标注页面中猫头鹰选择器选中的元素，并设置其顶部外边距为 2rem：

页面效果：

是不是过于简单？这是因为示例中的页面元素比较简单罢了。猫头鹰选择器真正的强大之处，在于对 任意 元素生效。如果样式和页面略作调整：

页面容器内的各元素依然可以保持相同的上边距：

惊不惊喜，意不意外？！

再来看看这个神奇的选择器的名字：lobotomized owl。什么样的猫头鹰才算得上 lobotomized 的猫头鹰呢？lobotomized 这个词衍生自 lobotomy（读作 ləˈbɒtəmi），意为脑叶切断术、或 额叶前部脑白质切断术。这是上世纪 1930 ~ 1950 年代采用过的一项神经外科手术，用于治疗诸如精神分裂症、临床忧郁症在内的精神病。虽然历史还曾嘉奖过这方面有过突出贡献的科学家，但终究因其巨大的副作用和术后不确定性而淡出历史舞台。经此手术后的患者，往往丧失精神冲动，表现出类似痴呆、弱智的迹象，所以，一只标准的 lobotomized 猫头鹰大概长这样—— 可见，中译本省略了关键的 lobotomized，只简称为“猫头鹰选择器”，从含义上讲似乎少了点原创人期望表达的意思。。。

不如就叫【呆头鹰选择器】可好？ 😀😀

Manning - CSS in Depth

Chris Coyier: Spoooooky CSS Selectors

github - css-protips: use-the-lobotomized-owl-selector